<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    <city-aside :aside="cities" @change="cityClickChange"></city-aside>
  </div>
</template>
<script>
  import axios from 'axios'
  import CityHeader from './components/Header.vue'
  import CitySearch from './components/Search.vue'
  import CityList from './components/List.vue'
  import CityAside from './components/Aside.vue'
    export default {
        name: "City",
        components : {
          CityHeader,
          CitySearch,
          CityList,
          CityAside
       },
      data () {
        return {
          cities:{},//城市
          hotCities:[],//热门城市
          letter:"" //定义新的数据(用于存储点击的字母)
        }
      },
      methods:{
           getCityInfo(){
             axios.get('./static/mock/city.json').then(this.getInfoSucc)
           },
           getInfoSucc(res){
             res=res.data;
             if(res.ret && res.data){
              const data=res.data;
              this.cities=data.cities;
              this.hotCities=data.hotCities;
            }
          },
          cityClickChange(letter){//事件监听
             this.letter=letter;//存储
           //  console.log(letter);
          }
      },
       mounted  () {
         this.getCityInfo()
       }
     }
</script>

<style scoped>

</style>
